body {
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    width: calc(100vw - 6px);
}

#app {
    width: calc(100vw - 6px);
    height: calc(100vh - 6px);
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
    /* 滚动条宽度 */
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    /* 轨道背景颜色 */
    background-color: rgba(0, 0, 0, 0.1);
    /* 圆角 */
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background-color: #d0e4fc; /* 滚动条颜色 */
    border-radius: 2px; /* 圆角 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #b5bcc4; /* 滚动条悬停时的颜色 */
}

/* 布局头和内容 */
.menu {
    width: calc(100vw - 6px);
    height: 9vh;
    min-width: 200px;
    min-height: 90px;
    background-color: #bbf3d7;
    overflow: auto;
}

.main {
    width: calc(100vw - 6px);
    height: 91vh;
    min-width: 200px;
    min-height: 200px;
    background-color: #fbfbfb;
    display: flex;
}

/* 内容中左右布局 */
.left, .right {
    display: inline-block;
    width: calc(50vw - 6px);
    height: calc(91vh - 6px);
    min-height: 200px;
    min-width: 200px;
    margin: 0;
    padding: 2px;
    overflow: auto;
}

.left-all {
    width: calc(100vw - 6px);
}

.left {
    border-right: 2px solid #e1f3d8;
}

.right {
}

.right-hide {
    /* 隐藏元素 */
    display: none;
}

/* 输入、结果模块样式 */
.input-div, .output-div {
    height: calc(91vh - 46px);
    overflow: auto;
    padding-top: 4px;
}

.output-div {
}

/*输入文本*/
.input {
    min-width: calc(50vw - 52px);
    border-color: gray;
    font-size: 14px;
    line-height: 16px;
    resize: vertical; /* 允许垂直调整大小 */
    white-space: pre; /* 保留换行符，但允许自然换行 */
    overflow-x: auto; /* 启用水平滚动条 */
    word-wrap: break-word; /* 允许单词断行 */
}

.input-left-all {
    min-width: calc(50vw - 52px);
    width: calc(100vw - 52px);
}

/* 输入行显示行号区域 */
.editor-container {
    display: flex;
    align-items: flex-start;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

/* 行号显示 */
.line-numbers {
    width: 30px;
    padding: 2px 2px 0 2px;
    user-select: none;
    color: #aaa;
    background-color: #fbfbfb;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    font-size: 12px;
    text-align: right;
    line-height: 16px;
}


/* 分组样式 */
.part {
    padding: 0 2px 4px 0;
    border-radius: 4px;
    margin-left: 2px;
}

/* 背景样式 */
.white {
    background-color: white;
}

.light-blue-green {
    background-color: #bbf3d7;
}

.light_pink {
    background-color: rgb(245, 233, 233);
}

.light_blue {
    background-color: rgb(229, 233, 249);
}

.light_brown {
    background-color: rgb(232, 217, 207);;
}

.light_gray_green {
    background-color: rgb(225, 233, 233);
}

/* 下标git */
.github-desc {
    position: fixed;
    bottom: 6px;
    right: 0;
    width: 180px;
    text-align: right;
    text-decoration: none;
}

/* setting */
.setting-start {
    position: fixed;
    top: 6px;
    right: 12px;
    width: 180px;
    text-align: right;
    text-decoration: none;
}

/* json组件样式 */
.json-obj-main-1 {
    background-color: #f1faf6;
    border-radius: 4px;
    border: 1px solid #ccc;
    min-width: 100px;
}

.json-obj-main-2 {
    background-color: #f0fafa;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 2px;
    min-width: 100px;
}

.json-obj-main-3 {
    background-color: #f8f8f0;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 2px;
    min-width: 100px;
}

.json-obj-main-4 {
    background-color: #f6f0f6;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 2px;
    min-width: 100px;
}

.json-obj-main-5 {
    background-color: #f0f4f4;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 2px;
    min-width: 100px;
}

.json-obj-main-6 {
    background-color: #f2f2e5;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 2px;
    min-width: 100px;
}

.key-value-out {
    border: 1px solid #dee;
}

.key-value-main {
    font-size: 14px;
    display: flex; /* 使父容器成为 Flex 容器 */
    align-items: center; /* 垂直居中 */
}

.key-value-key {
    display: inline-block;
    text-align: right;
    margin: 2px 0 0 0;
}

.key-type-0 {
    width: 80px;
}

.key-type-1 {
    width: 100px;
}

.key-type-2 {
    width: 120px;
}

.key-type-3 {
    width: 160px;
}

.key-type-4 {
    width: 200px;
}

.input-text-1 {
    width: 500px;
}

.input-text-2 {
    width: 400px;
}

.input-text-3 {
    width: 300px;
}

.input-text-4 {
    width: 200px;
}

.input-text-5 {
    width: 150px;
}

.input-text-6 {
    width: 100px;
}

/* 增加字段 */
.add-key-value-main {
    text-align: center;
}

.input-number {
    max-width: 200px;
    min-width: 100px;
    width: 140px;
}

/* 设置 input-number 输入框字体颜色为蓝色 */
.el-input-number--mini .el-input__inner {
    color: #357eb9 !important;
}